<template>
	<span id="form-items">
		<template v-for="item in formItems">
			<template v-if="item.kind.toString() !== 'textarea'">
				<el-col :class="itemClass" :sm="colWidth">
					<el-form-item :label="item.label" :prop="item.prop" :label-width="labelWidth" :error="errorMsg">
						<column-element :model="model" :item="item" :colWidth="colWidth" @handle-change="handleChange" @handle-blur="handleBlur"></column-element>
					</el-form-item>
				</el-col>
			</template>
			<template v-else>
				<el-col :sm="item.colWidth ? item.colWidth : 22" :style="item.style ? item.style : {width: '91.6%'}">
					<el-form-item :label="item.label" :prop="item.prop" :label-width="labelWidth" :error="errorMsg">
						<el-input v-model="model[item.prop]" type="textarea" clearable placeholder="请输入内容" style="width: 100%;height: 100%;" :autosize="{minRows: 3}"
							:disabled="Boolean(item.disabled)" @change="handleChange(item.prop, model)" @blur="handleBlur(item.prop, model)"></el-input>
					</el-form-item>
				</el-col>
			</template>
		</template>
	</span>
</template>

<script>
export default {
	name: "form-element",
	props: {
		formItems: {
			type: Array,
			default() {
				return [];
			}
		},
		model: {
			type: Object,
			default() {
				return {};
			}
		},
		errorMsg: {
			type: String,
			default: ""
		},
		labelWidth: {
			type: String,
			default: "100px"
		},
		colWidth: {
			type: Number,
			default: 8
		}
	},
	data() {
		return {};
	},
	computed: {
		itemClass() {
			if (this.colWidth > 12) {
				return "el-big-item-class";
			}
		}
	},
	methods: {
		handleChange(prop, form) {
			this.$emit("handle-change", prop, form);
		},
		handleBlur(prop, form) {
			this.$emit("handle-blur", prop, form);
		}
	}
};
</script>

<style scoped>
#form-items >>> .el-date-editor {
	width: 100%;
}

#form-items >>> .el-date-editor--datetime {
	width: 100%;
}

#form-items >>> .el-range-editor {
	width: 140%;
}

#form-items >>> .el-big-item-class {
	margin-left: 240px;
}

#form-items >>> .el-input__inner {
	text-align: center;
}
</style>
